<template>
  <div id="app">
    <div id="cover"></div>
    <div id="loading" v-show="loading">
      <loading></loading>
    </div>
    <Header></Header>
    <!-- <div>{{fullName}}{{count}}</div> -->
    <!-- <Todo></Todo> -->
    <!-- <router-link to="/app">app</router-link>
    <router-link to="/login">login</router-link> -->
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <!-- <button @click="notify">notify</button> -->
    <!-- <notification content="test notify" /> -->
    <Footer></Footer>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import bus from './util/bus'
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import Loading from './components/loading/loading.vue'
export default {
  metaInfo: {
    title: 'TODO APP'
  },
  components: {
    Header,
    Footer,
    Loading
  },
  computed: {
    ...mapState(['count', 'loading']),
    fullName () {
      return this.$store.getters.fullName
    }
  },
  methods: {
    ...mapMutations(['startLoading', 'endLoading']),
    notify () {
      this.$notify({
        content: 'test 他说他',
        btn: '关关'
      })
    }
  },
  mounted () {
    console.log('app 启动')
    bus.$on('showLoading', () => {
      console.log('showloading')
      this.startLoading()
    })
    bus.$on('endLoading', () => {
      console.log('endloading')
      this.endLoading()
    })
    this.$store.dispatch('updateCountSync', { num: 3 })
  }
}
</script>

<style lang="stylus" scoped>
#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  opacity: 0.9;
  z-index: -1;
}
#loading{
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  background-color rgba(255,255,255,.3)
  z-index 99
  display flex
  align-items center
  justify-content center
}
</style>
